<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>dojox.Grid with Dojo.Data via binding</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> 
<style type="text/css"> 
@import "../../../../dojo/resources/dojo.css"; 
@import "../../_grid/Grid.css"; 
#grid { 
width: 65em; 
height: 25em; 
}
</style> 
<script type="text/javascript" src="../../../../dojo/dojo.js"  
djConfig="isDebug: true, debugAtAllCosts: false, parseOnLoad: true"></script> 
<script type="text/javascript"> 
dojo.require("dojox.grid.Grid"); 
dojo.require("dojo.data.ItemFileWriteStore"); 
dojo.require("dojo.parser"); 
dojo.require("dijit.form.Button"); 
</script> 
<script type="text/javascript"> 
function getRow(inRowIndex){ 
return ' ' + inRowIndex; 
}

var layoutCountries = [ 
// view 0 
{ type: 'dojox.GridRowView', width: '20px' }, 
// view 1 
{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true}, 
// view 2 
{ cells: [[ 
{ name: "field 0", field: 0, width: 8 }, 
{ name: "field 1", width: 8 } 
]]} 
];

var emptyData = { identifier: 'name', label: 'name', items: []}; 
var jsonStore = new dojo.data.ItemFileWriteStore({data: emptyData}); 
var numItems = 0; 
</script> 
</head> 
<body class="tundra"> 
<h5>dojox.Grid using initially-empty Dojo.Data write stores and then adding an item.  Item should show up correctly (no "?"s) when added.</h5> 
<br> 
<span dojoType="dojox.grid.data.DojoData"  
jsId="dataModel"  
rowsPerPage="20" 
store="jsonStore" count="0"> 
</span> 
<div id="grid" dojoType="dojox.Grid" elasticView="2"  
model="dataModel" structure="layoutCountries"> 
</div> 
<button dojoType="dijit.form.Button"> 
<script type="dojo/method" event="onClick"> 
numItems++; 
jsonStore.newItem({name: numItems + "-person Land", type: "city", population: numItems}); 
</script> 
Add Item 
</button> 
</body> 
</html> 